<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>《系统工程》精品资源共享课——个人信息</title>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<style type="text/css">
		main{
			background-color: white;
			width:70%;
			margin:50px auto 150px auto;
		}
		main .content{
			width:80%;
			padding:30px 230px 30px 230px;
			margin:0 auto;
		}

		main .content .btn-groups{
			width:100%;
			margin:0 auto;
		}
	</style>
</head>
<body>
	<div id="top">
		<img src="../image/huanonglogo.png" class="logo">
		<ul>
			<li class="userInfo hidden"><a href="userInformation.html">个人信息</a></li>
			<li><span id="user"></span></li>
			<li class="logout hidden"><a href="login.html">退出</a></li>
			<li id="login" class="login"><a href="login.html"><img src="../image/user.png"><span>登录</span></a></li>
		</ul>
	</div>
	<nav>
		<ul class="rows">
			<li class="col-md-2 col-lg-2"><a href="../index.html">首页</a></li>
			<li class="dropdown col-md-2 col-lg-2">
				<a href="#"  data-toggle="dropdown" class="dropdown-toggle">课程概要<span class="glyphicon glyphicon-chevron-down"></span></a>
				<ul class="dropdown-menu">
					<li><a href="primaryResource.html">教学大纲</a></li>
					<li><a href="primaryResource.html">教学日历</a></li>
					<li><a href="primaryResource.html">教学教材</a></li>
					<li><a href="primaryResource.html">参考资料</a></li>
					<li><a href="primaryResource.html">重点难点</a></li>
				</ul>
			</li>
			<li class="dropdown col-md-2 col-lg-2">
				<a href="#"  data-toggle="dropdown" class="dropdown-toggle">课程资源<span class="glyphicon glyphicon-chevron-down"></span></a>
				<ul class="dropdown-menu">
					<li><a href="video.html">教学视频</a></li>
					<li><a href="ppt.html">教学课件</a></li>
					<li><a href="homework.html">作业</a></li>
				</ul>
			</li>
			<li class="col-md-2 col-lg-2"><a href="courses.html">课程内容</a></li>
			<li class="col-md-2 col-lg-2"><a href="expandingResource.html">拓展资源</a></li>
			<li class="col-md-2 hidden teacher_li"><a href="teacherCourseManagement.html">课程管理</a></li>
		</ul>

	</nav>
	<main>
		<div class="content">
			<div class="form-group">
				<label for="name">用户名:</label>
				<span name="name"></span>
			</div>
			<div class="form-group">
				<label for="nickname">用户昵称:</label>
				<span name="nickname"></span>
			</div>
			<div class="form-group">
				<label for="sex">性别:</label>
				<span name="sex"></span>
			</div>
			<div class="form-group">
				<label for="telphone">电话:</label>
				<span name="tel"></span>
			</div>
			<div class="form-group">
				<label for="school">学校:</label>
				<span name="school"></span>
			</div>		
			<div class="form-group">
				<label for="major">专业:</label>
				<span name="major"></span>
			</div>
			<div class="form-group">
				<label for="number">学号:</label>
				<span name="number"></span>
			</div>
			<div class="form-group">
				<label for="grade">年级:</label>
				<span name="grade"></span>
			</div> 
			<div class="form-group btn-groups">
				<button class="btn btn-default"  data-toggle="modal" data-target="#updatePwdModal">修改密码</button>
				<button class="btn btn-info" data-toggle="modal" data-target="#updateModal" onclick="dataInit()">修改信息</button>
			</div>               		
		</div>
	</main>
	<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="resetForm()">&times;</button>
	                <h4 class="modal-title" id="addModalLabel">修改个人信息</h4>
	            </div>
	            <div class="modal-body">
	            	<form role="form">
	            		<input type="text" name="id" class="form-control hidden">
						<div class="form-group">
							<label for="name">用户名</label>
							<input type="text" name="name" class="form-control required " disabled />
						</div>
						<div class="form-group">
							<label for="nickname">用户昵称</label>
							<input type="text" name="nickname" class="form-control required "/>
						</div>
						<div class="form-group">
							<label for="sex">性别</label>
							<select name="sex" class="form-control required">
								<option>男</option>
								<option>女</option>
							</select>
						</div>
						<div class="form-group">
							<label for="telphone">电话</label>
							<input type="text" name="tel" class="form-control required "/>
						</div>
						<div class="form-group">
							<label for="school">学校</label>
							<input type="text" name="school" class="form-control required "/>
						</div>		
						<div class="form-group">
							<label for="major">专业</label>
							<input type="text" name="major" class="form-control required "/>
						</div>
						<div class="form-group">
							<label for="number">学号</label>
							<input type="text" name="number" class="form-control required "/>
						</div>
						<div class="form-group">
							<label for="grade">年级</label>
							<select name="grade" class="form-control required">
							</select>
						</div>  
	            	</form>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetForm()">关闭</button>
	                <button type="button" class="btn btn-primary btn-submit" onclick="editInfo();">提交</button>
	            </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>
	<div class="modal fade" id="updatePwdModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="resetForm()">&times;</button>
	                <h4 class="modal-title" id="addModalLabel">修改密码</h4>
	            </div>
	            <div class="modal-body">
	            	<form role="form">
	            		<div class="form-group">
							<label for="password">原密码</label>
							<input type="password" name="oldPassword" class="form-control required "/>
						</div>
						<div class="form-group">
							<label for="password">新密码</label>
							<input type="password" name="newPassword" class="form-control required "/>
							<strong style='color:red' class="hidden" id="checkPwd">两次密码不一致</strong>
						</div>
						<div class="form-group">
							<label for="password">重复密码</label>
							<input type="password" name="newPasswordAgain" class="form-control required "/>
							<strong style='color:red' class="hidden" id="checkPwd">两次密码不一致</strong>
						</div>
	            	</form>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetForm()">关闭</button>
	                <button type="button" class="btn btn-primary btn-submit">提交</button>
	            </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>
	<footer>
		<p>版权所有：华南农业大学 数学与信息学院 软件学院</p>
	</footer>
	<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<script type="text/javascript">
		$(function(){
			getInfoByName();
			dataInit();
		})

		function isNull(modal){

			  $(" "+modal+" form :input.required").each(function(){
			    var obj=$(this).parent().find('.alarm');
			    if($(this).val()==""){
			      if(obj.length==0){
			        $(this).parent().append("<b style='color:red' class='alarm'>X该字段不能为空!</b>");
			      }
			    }else{
			      $(this).parent().find('.alarm').remove();
			    }
			  })
			  var arr=$(" "+modal+" form .form-group:not(.hidden)").find(".required").filter(function(index) {
			    return $(this).val()=="";
			  });
			  if(arr.length!=0){
			    alert("请填入完整信息！");
			    return false;
			  }else{
			    return true;
			  }
		}


		$("form :input[name='newPasswordAgain']").blur(function(event) {
			var pwd1=$("form :input[name='newPassword']").val();
			var pwd2=$("form :input[name='newPasswordAgain']").val();
			if(pwd1!=pwd2){
				$("#checkPwd").removeClass('hidden');
				$("#updatePwdModal .btn-submit").attr('disabled',true);
			}else{
				$("#checkPwd").hide();
				$("#updatePwdModal .btn-submit").attr('disabled',false);
			}
		});

		$("#updatePwdModal form :input[name='oldPassword']").blur(function(event) {
			var pwdVal=$(this).val();
			var name=sessionStorage.getItem("name");
			var role=sessionStorage.getItem("role");
			var url="";
			if(role=="student"){
				url="/studentController/checkStudentPwd";
			}else if(role=="teacher"){
				url="/teacherController/checkTeacherPwd";
			}
			$.ajax({
				url: url,
				type: 'POST',
				contentType : "application/x-www-form-urlencoded",
				data: {
					password: pwdVal,
					name: name
				},
				success: function(data){
					if(data.returnCode==1){
						$("#updatePwdModal .btn-submit").removeAttr('disabled');
					}else if(data.returnCode==0){
						alert("原密码错误，请重新确定");
						$("#updatePwdModal .btn-submit").attr('disabled',true);
					}
				}
			});
			
		});

		$("#updatePwdModal .btn-submit").click(function(event) {
			var role=sessionStorage.getItem("role");
			var id=sessionStorage.getItem("id");
			var url="",params={};
			if(role == "student"){
				url="/studentController/editStudent";
			}else if(role == "teacher"){
				url="/teacherController/editTeacher";
			}
			var newPwd=$("form :input[name='newPasswordAgain']").val();
			params.id=id;
			params.password=newPwd;
			if(isNull("#updatePwdModal")){
				$.ajax({
					url: url,
		            type: 'post',
		            dataType : "json",
		            contentType : "application/json;charset=utf-8",
		            data: JSON.stringify(params),
		            success:function(data){
		             	if(data==1){
		                	alert("修改成功！");
		                	$('#updatePwdModal').modal('hide');
		               
		              	}else{
		                	alert("修改失败！");
		              	}
		              	$("#updatePwdModal input").each(function(index, el) {
					    	$(el).val("");
						});
		            }

				});
			}
			getInfoByName();
		});


		
		function getInfoByName(){
			var name=sessionStorage.getItem("name");
			var role=sessionStorage.getItem("role");
			var url="";
			if(role=="student"){
				url="/studentController/getStudentInfo";
			}else if(role=="teacher"){
				url="/teacherController/getTeacherInfo";
			}
			$.ajax({
				url: url,
				type: 'POST',
				contentType : "application/x-www-form-urlencoded",
				data: {name: name},
				dataType:"json",
				success: function(data){
					if(data.role=="student"){
						sessionStorage.setItem("id",data.student.stId);
						sessionStorage.setItem("nickname",data.student.stNickname);
						sessionStorage.setItem("name",data.student.stName);
						sessionStorage.setItem("sex",data.student.stSex);
						sessionStorage.setItem("tel",data.student.stTel);
						sessionStorage.setItem("school",data.student.stSchool);
						sessionStorage.setItem("grade",data.student.stGrade);
						sessionStorage.setItem("number",data.student.stNumber);
						sessionStorage.setItem("major",data.student.stMajor);
					}else if(data.role=="teacher"){
						sessionStorage.setItem("id",data.teacher.tId);
						sessionStorage.setItem("nickname",data.teacher.tNickname);
						sessionStorage.setItem("name",data.teacher.tName);
						sessionStorage.setItem("sex",data.teacher.tSex);
						sessionStorage.setItem("tel",data.teacher.tTel);
					}
				}
			});
			
		}

		function editInfo(){
			var role=sessionStorage.getItem("role");
			var url="";
			if(role=="student"){
				url="/studentController/editStudent";
			}else if(role=="teacher"){
				url="/teacherController/editTeacher";
			}
			var params={};
			  	params.id=$("#updateModal form input[name='id']").val();
			  	params.name=$("#updateModal form input[name='name']").val();
			  	params.nickname=$("#updateModal form input[name='nickname']").val();
				params.password=$("#updateModal form input[name='password']").val();
				params.sex=$("#updateModal form select[name='sex']").val();
				params.tel=$("#updateModal form input[name='tel']").val();
				params.school=$("#updateModal form input[name='school']").val();
				params.major=$("#updateModal form input[name='major']").val();
				params.number=$("#updateModal form input[name='number']").val();
				params.grade=$("#updateModal form select[name='grade']").val();
				$.ajax({
				    url: url,
				    type: 'post',
				    dataType : "json",
				    contentType : "application/json;charset=utf-8",
				    data: JSON.stringify(params),
				    success:function(data){
				      	if(data==1){
				        	alert("修改成功！");
							getInfoByName();
							dataInit();
							window.location.reload();
				      	}else{
				        	alert("修改失败！");
				      	}
				    }
				});
				
				$("#updateModal").modal('hide');

		}

		function resetForm(){
		  	$("form input").each(function(index, el) {
		    	$(el).val("");
		    	$(this).parent().find('.alarm').remove();
		    	$(this).parent().find('.tel').remove();
		  	});
		}

		function dataInit(){
			var role=sessionStorage.getItem("role");
			if(role=="teacher"){
				var arr=$("#updateModal form .form-control").filter(".form-control[name='school'],.form-control[name='major'],.form-control[name='number'],.form-control[name='grade']");
		        arr.each(function(index, el) {
		            $(el).parent().addClass('hidden');
		        });
		        var arrContent=$(".content span").filter("span[name='school'],span[name='major'],span[name='number'],span[name='grade']");
		        arrContent.each(function(index, el) {
		            $(el).parent().addClass('hidden');
		        });
			}
			$("#updateModal form .form-control[name='id']").val(sessionStorage.getItem("id"));
			$("#updateModal form .form-control[name='name']").val($(".content span[name='name']").html(sessionStorage.getItem("name")).html());
			$("#updateModal form .form-control[name='nickname']").val($(".content span[name='nickname']").html(sessionStorage.getItem("nickname")).html());
			$("#updateModal form .form-control[name='sex']").val($(".content span[name='sex']").html(sessionStorage.getItem("sex")).html());
			$("#updateModal form .form-control[name='tel']").val($(".content span[name='tel']").html(sessionStorage.getItem("tel")).html());
			$("#updateModal form .form-control[name='school']").val($(".content span[name='school']").html(sessionStorage.getItem("school")).html());
			$("#updateModal form .form-control[name='major']").val($(".content span[name='major']").html(sessionStorage.getItem("major")).html());
			$("#updateModal form .form-control[name='number']").val($(".content span[name='number']").html(sessionStorage.getItem("number")).html());
			$("#updateModal form .form-control[name='grade']").val($(".content span[name='grade']").html(sessionStorage.getItem("grade")).html());
		}

	</script>
</body>
</html>